<template>
  <el-dialog
    :title="$t('message.ddxq')"
    :visible.sync="isShow"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="80%"
  >
    <div class="dialog_wrap">
      <div class="title">
        <span>{{ $t('message.ddxx') }}</span>
        <span style="font-size: 14px;font-weight: 500;color:#e89e42;" class="ml20">
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '0'">{{ $t('message.dzf') }}</span>
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '1'">{{ $t('message.cswzf') }}</span>
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '2'">{{ $t('message.qxzf') }}</span>
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '3'">{{ $t('message.zfcg') }}</span>
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '4'">{{ $t('message.tkz') }}</span>
          <span v-if="detail.orderBean && detail.orderBean.payStatus === '5'">{{ $t('message.tkcg') }}</span>
        </span>
      </div>
      <div class="wrap">
        <div class="item">
          <span class="key">{{ $t('message.ddbh') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.orderId }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.xdsb') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.deviceName }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.xdsj') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.createTime }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.sfje') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.realPrice }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.zffs') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.payMethod }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.paytime') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.payTime }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.hyxm') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.userName }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.sjh') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.phone }}</span>
        </div>
        <div v-if="detail.mixedPayMethod" class="item">
          <span class="key">{{ $t('message.hhzffs') }}：</span>
          <span class="value">{{ detail.mixedPayMethod || '-' }}</span>
        </div>
        <div v-if="detail.mixedPayMoney" class="item">
          <span class="key">{{ $t('message.hhzfje') }}：</span>
          <span class="value">{{ detail.mixedPayMoney || '-' }}</span>
        </div>
        <div v-if="detail.cardPayMoney" class="item">
          <span class="key">{{ $t('message.hhzfhykje') }}：</span>
          <span class="value">{{ detail.cardPayMoney || '-' }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.bz') }}：</span>
          <span class="value">{{ detail.orderBean && detail.orderBean.remarks }}</span>
        </div>
      </div>
      <div class="title">
        <span>{{ $t('message.cbzt') }}</span>
      </div>
      <div class="wrap">
        <div class="item">
          <span class="key">{{ $t('message.cbzt') }}：</span>
          <span class="value">{{ detail.coinsBean && detail.coinsBean.issendCoin == '0' ? $t('message.wcb') : $t('message.ycb') }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.cbfs') }}：</span>
          <span v-if="detail.coinsBean && detail.coinsBean.sendType == '0'" class="value">{{ $t('message.wcb') }}</span>
          <span v-if="detail.coinsBean && detail.coinsBean.sendType == '1'" class="value">{{ $t('message.zdcb') }}</span>
          <span v-if="detail.coinsBean && detail.coinsBean.sendType == '2'" class="value">{{ $t('message.sdcb') }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.cbsj') }}：</span>
          <span class="value">{{ detail.coinsBean && detail.coinsBean.sendTime }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.czr') }}：</span>
          <span class="value">{{ detail.coinsBean && detail.coinsBean.sendUserName }}</span>
        </div>
        <div class="item">
          <span class="key">{{ $t('message.cbsbyy') }}：</span>
          <span class="value">{{ detail.coinsBean && detail.coinsBean.resultCause }}</span>
        </div>
      </div>
      <div class="title">{{ $t('message.ddnr') }}</div>
      <el-table
        :data="detail.items"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.mc')"
          prop="name"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.bsl')"
          prop="coinNum"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.num')"
          prop="num"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.xsjy')"
          prop="originalPrice"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.yhjey')"
          prop="yhPrice"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.sfjey')"
          prop="realPrice"
          min-width="120"
          show-overflow-tooltip
        />
      </el-table>
      <div class="mt30" />
    </div>

  </el-dialog>
</template>

<script>
import store from '@/store'

import { orderlistDetail } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      detail: {},
      modalDialog: store.getters.dialog
    }
  },
  methods: {
    getOrderDetail(id) {
      orderlistDetail({ param: { orderId: id }}).then(res => {
        this.detail = { ...res.record }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog_wrap{
    .title{
      font-size: 16px;
      font-weight: 800;
      margin: 20px 0px;
    }
    .wrap{
      display: flex;
      flex-wrap: wrap;
      .item{
        width: 33.33%;
        margin-bottom: 10px;
      }
    }
  }
</style>
